<template>
    <div>
        <el-row>
            <el-col :span="12">
                <div ref="main" style="width: 100%;height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div ref="main2" style="width: 100%;height:400px;"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
    import { ref, onMounted } from 'vue'
    import * as echarts from 'echarts'
    const main = ref({})
    const data = [
        { name: '手机通讯', value: 15000 },
        { name: '智能设备', value: 3000 },
        { name: '书籍', value: 500 },
        { name: '电脑', value: 6000 },
    ]
    const xData = ['手机通讯', '智能设备', '书籍', '电脑']
    const xValues = [15000, 3000, 500, 6000]
    const main2 = ref({})

    onMounted(() => {
        initEcharts1(main.value, data, 'spzx订单销售额统计')
        initEcharts2(main2.value, xData, xValues)
    })
    const initEcharts1 = (container, data, title) => {
        var myChart = echarts.init(container)
        var option = {
            tooltip: {
                trigger: 'item',
            },
            legend: {
                top: '5%',
                left: 'center',
            },
            series: [
                {
                    name: title,
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2,
                    },
                    label: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold',
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    data,
                },
            ],
        }
        myChart.setOption(option)
    }
    const initEcharts2 = (chartDom, xData, xValues) => {
        var myChart = echarts.init(chartDom)
        var option = {
            xAxis: {
                type: 'category',
                data: xData,
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    data: xValues,
                    type: 'bar',
                },
            ],
        }
        myChart.setOption(option)
    }
</script>